import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from "mobx-react";
import { Button, Modal, Spin } from "antd";
import { WeaTop, WeaRightMenu, WeaTab, WeaLocaleProvider, WeaDialog, WeaFormItem, WeaSearchGroup } from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

/*
  @inject 将组件连接到提供的 stores
  注入 store 到当前组件里，注入的 ("demo") 来源于 ../stores/index.js中的:
  module.exports = {
    demo: new demo()
  };
*/
@inject('demo')
// @observer 把组件变成响应式组件，以确保组件渲染中使用的数据变化时都可以强制刷新组件
@observer
class CreateAndEdit extends React.Component {

  onRightMenuClick = (type) => {
    const { demo } = this.props;
    const { form, join, update, editForm } = demo;
    switch (type) {
      case "SAVE":
        form.validateForm().then(f => {
          if (f.isValid) {
            join();
          } else {
            f.showErrors();
            this.forceUpdate();
          }
        })
        break;
      case "UPDATE":
        editForm.validateForm().then(f => {
          if (f.isValid) {
            update();
          } else {
            f.showErrors();
            this.forceUpdate();
          }
        })
        break;
    }
  }

  // 任何组件都必须有一个 render 方法用来渲染页面
  render() {
    const { demo } = this.props;
    const { form, editForm, visible, join, searchForm, inputValue, status, tableStore, logVisible, logStore, editVisible } = demo;
    const { showSearchAd, advancedSearchConditionInfo } = toJS(status);
    return (
      <div>
        {/* 新建对话框 */}
        <WeaDialog
          title={getLabel(388226, "新建接入设置")}
          icon="icon-coms-ModelingEngine"
          iconBgcolor="#0079de"
          style={{ width: 600, height: 500 }}
          visible={visible}
          buttons={[
            <Button
              type="primary"
              onClick={() => { this.onRightMenuClick("SAVE") }}
            >{getLabel(86, '保存')}</Button>
          ]}
          onCancel={() => {
            demo.setVisible(false);
          }}
          hasScroll={true}
          moreBtn={{
            datas: [
              {
                key: "1",
                icon: <i className={"icon-coms-Preservation"} />,
                content: getLabel(86, '保存'),
                onClick: () => { this.onRightMenuClick("SAVE") }
              }
            ],
            collectParams: {
              favname: `${getLabel(388226, "接入设置")}`,
              favouritetype: 1,
              objid: 0,
              link: "wui/engine.html#/main/demo",
              importantlevel: 1
            }
          }}
        >
          {form.render({ center: true })}
        </WeaDialog >
        {/* 编辑对话框 */}
        <WeaDialog
          title={getLabel(388553, "编辑接入设置")}
          icon="icon-coms-ModelingEngine"
          iconBgcolor="#0079de"
          style={{ width: 600, height: 500 }}
          visible={editVisible}
          buttons={[
            <Button
              type="primary"
              onClick={() => { this.onRightMenuClick("UPDATE") }}
            >
              {getLabel(86, '保存')}
            </Button>
          ]}
          onCancel={() => {
            demo.setEditVisible(false);
          }}
          hasScroll={true}
          moreBtn={{
            datas: [
              {
                key: "1",
                icon: <i className={"icon-coms-Preservation"} />,
                content: getLabel(86, '保存'),
                onClick: () => { this.onRightMenuClick("UPDATE") }
              }
            ],
            collectParams: {
              favname: `${getLabel(388226, "EM接入设置")}`,
              favouritetype: 1,
              objid: 0,
              link: "wui/engine.html#/main/demo",
              importantlevel: 1
            }
          }}
        >
          {editForm.render({ center: true })}
        </WeaDialog >
      </div>
    )
  }
}

export default CreateAndEdit;
